<!DOCTYPE html>
<html>
  <head>
    <title>Cargo</title>
    <!-- reset.css 无须引用 -->
    <link rel="stylesheet" href="./css/reset.css" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <!-- jRange.css和styles.css 须引用 -->
    <link rel="stylesheet" href="./css/jRange.css" />
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>
    <div class="cargo-content">
      <div class="cargo-itsimple hide">
        <div class="flex-column align-center flex-center title-box">
          <div class="logo flex-row flex-center">
            <img draggable="false" src="./images/logo.png" alt="cargo one" />
          </div>

          <div class="logo-txt">Versatile features at your fingertips</div>
        </div>

        <div class="flex-column left-body">
          <div class="title">Status</div>
          <div class="sub-title status-title">Default</div>
          <div class="list-box">
            <div class="img-box sel-active" data-index="0">
              <div
                style="background-image: url('./images/icon-1.png')"
                alt=""
                class="img-item"
              ></div>
            </div>

            <div class="img-box" data-index="1">
              <div
                style="background-image: url('./images/icon-2.png')"
                alt=""
                class="img-item"
              ></div>
            </div>

            <div class="img-box" data-index="2">
              <div
                style="background-image: url('./images/icon-3.png')"
                alt=""
                class="img-item"
              ></div>
            </div>
          </div>

          <div class="color-body">
            <div class="title">Box cover</div>
            <div class="sub-title color-title">Black</div>
            <div class="list-box">
              <div class="color-box sel-active" data-index="0">
                <div class="color-item" style="background-color: #000"></div>
              </div>
              <div class="color-box" data-index="1">
                <div class="color-item" style="background-color: #355842"></div>
              </div>
              <div class="color-box" data-index="2">
                <div class="color-item" style="background-color: #99b889"></div>
              </div>
              <div class="color-box" data-index="3">
                <div class="color-item" style="background-color: #a299d1"></div>
              </div>
            </div>
          </div>

          <div class="title">Stem angle</div>
          <div class="slider-box">
            <input class="handle-slider" />
          </div>
        </div>

        <div class="flex-column right-body align-end">
          <div class="title">Lights</div>
          <div class="sub-title light-title">OFF</div>
          <div class="list-box flex-end">
            <div class="img-right-box light-sel-item" data-index="0">
              <div
                style="background-image: url('./images/lights-on.png')"
                alt=""
                class="img-item"
              ></div>
            </div>

            <div class="img-right-box sel-active light-sel-item" data-index="1">
              <div
                style="background-image: url('./images/lights-off.png')"
                alt=""
                class="img-item"
              ></div>
            </div>
          </div>

          <div class="light-status-body">
            <div class="title">Light signals</div>
            <div class="sub-title light-signals-title">Click to view</div>
            <div class="list-box flex-end">
              <div class="img-right-box light-signals-item" data-index="0">
                <div
                  style="background-image: url('./images/icon-4.png')"
                  alt=""
                  class="img-item"
                ></div>
              </div>

              <div class="img-right-box light-signals-item" data-index="1">
                <div
                  style="background-image: url('./images/icon-5.png')"
                  alt=""
                  class="img-item"
                ></div>
              </div>
            </div>
          </div>

          <div class="title">Seatpost extension</div>
          <div class="slider-box">
            <input class="seat-slider" />
          </div>
        </div>

        <div id="pixi-canvas"></div>
        <div class="pixi-mask"></div>
      </div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jRange.js"></script>
    <!-- 引入 Pixi.js -->
    <script src="./js/pixi.min.js"></script>

    <script src="./js/tenway.min.js"></script>
  </body>
</html>
